<script setup lang="ts">
import { ElDialog, ElScrollbar } from 'element-plus'
import { propTypes } from '@/utils/propTypes'
import { computed, useAttrs, ref, unref, useSlots, watch, nextTick } from 'vue'
import { isNumber } from '@/utils/is'

const slots = useSlots()

const props = defineProps({
  modelValue: propTypes.bool.def(false),
  title: propTypes.string.def('Dialog'),
  fullscreen: propTypes.bool.def(false),
  maxHeight: propTypes.oneOfType([String, Number]).def('500px')
})

const emit = defineEmits(['update:fullscreen'])

const getBindValue = computed(() => {
  const delArr: string[] = ['fullscreen', 'title', 'maxHeight']
  const attrs = useAttrs()
  const obj: any = { ...attrs, ...props }
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key]
    }
  }
  return obj
})

let currentFullscreen: any = ref()
const isFullscreen = computed({
  get() {
    return currentFullscreen.value !== undefined ? currentFullscreen.value : props.fullscreen
  },
  set(val) {
    currentFullscreen.value = val
    emit('update:fullscreen', val)
  }
})

const toggleFull = () => {
  isFullscreen.value = !isFullscreen.value
}

const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight)

watch(
  () => isFullscreen.value,
  async (val: boolean) => {
    console.log(val)
    await nextTick()
    if (val) {
      const windowHeight = document.documentElement.offsetHeight
      dialogHeight.value = `${windowHeight - 55 - (slots.footer ? 63 : 0)}px`
    } else {
      dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight
    }
  },
  {
    immediate: true
  }
)

watch(
  () => props.modelValue,
  (val) => {
    if (!val) {
      // 关闭时重置
      currentFullscreen.value = undefined
    }
  }
)

const dialogStyle = computed(() => {
  console.log(unref(dialogHeight))
  return {
    height: unref(dialogHeight)
  }
})
</script>

<template>
  <ElDialog
    v-bind="getBindValue"
    :fullscreen="isFullscreen"
    destroy-on-close
    lock-scroll
    draggable
    modal-class="rev-dialog"
    :close-on-click-modal="false"
  >
    <template #header>
      <div class="flex justify-between">
        <slot name="title"> {{ title }} </slot>
        <!-- <SvgIcon
          :name="isFullscreen ? 'ele-CopyDocument' : 'ele-FullScreen'"
          class="preview-icon mr-18px cursor-pointer is-hover mt-2px z-10"
          :size="18"
          :title="isFullscreen ? '缩小' : '全屏'"
          color="var(--el-color-info)"
          @click="toggleFull"
        /> -->
        <Icon
          class="mr-2px cursor-pointer is-hover z-10"
          :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
          color="var(--el-color-info)"
          @click="toggleFull"
        />
      </div>
    </template>

    <ElScrollbar height="100%" :style="dialogStyle">
      <slot></slot>
    </ElScrollbar>

    <template v-if="slots.footer" #footer>
      <slot name="footer"></slot>
    </template>
  </ElDialog>
</template>

<style lang="less">
.rev-dialog {
  &.el-overlay {
    .el-dialog.is-fullscreen {
      .el-dialog__body {
        max-height: unset !important;
        padding: 0 !important;

        .el-scrollbar {
          padding: var(--el-dialog-padding-primary);
        }
        .el-select-dropdown {
          .el-scrollbar {
            padding: 0;
          }
        }
      }
    }
  }

  .el-dialog.is-fullscreen {
    padding: 0;
    border-radius: 0;

    &.is-fullscreen {
      padding: 0;
      height: 100%;
      overflow: auto;

      .el-dialog__body {
        max-height: unset !important;
        padding: 0 !important;

        .el-scrollbar {
          padding: var(--el-dialog-padding-primary);
        }
      }
    }

    .el-dialog__header {
      margin-right: 0 !important;
      border-bottom: 1px solid var(--el-border-color);
      padding: 10px 40px 10px 20px;
      font-size: 16px;
      margin-bottom: 0;
    }

    .el-dialog__footer {
      border-top: 1px solid var(--el-border-color);
      padding: 10px;
    }
  }

  .justify-between {
    justify-content: space-between;
    align-items: center;
  }

  .is-hover {
    &:hover {
      color: var(--el-color-primary) !important;
    }
  }

  // 弹框居中
  &.el-overlay .el-overlay-dialog {
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }

  &.el-overlay .el-overlay-dialog .el-dialog {
    margin: auto;
  }

  .el-scrollbar__view {
    height: 100%;
  }

  .el-dialog__headerbtn {
    width: 35px;
    height: 35px;
    top: 6px;
  }

  .dark {
    .el-dialog__header {
      border-bottom: 1px solid var(--el-border-color);
    }

    .el-dialog__footer {
      border-top: 1px solid var(--el-border-color);
    }
  }
}
</style>
